<template>
	<!-- 搜索商品页面  -->
	<view>
		<!-- 搜索框-->
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" v-model="shopName" placeholder="商品名" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-gradual-blue shadow-blur round" @click="sercher">查询</button>
			</view>
		</view>
		<!-- 历史 -->
		<view class="searcher-history">
			<view class="rm">
				<view class="rm-ss">热门搜索</view>
				<view class="rm-ss-craid">
					商品
				</view>
			</view>
			<view class="li-shi">
				<view class="li-shi-name">搜索历史
					<text class="delete-all" @click="clear">清楚历史</text>
				</view>
				<view class="left-li-shi">
					<text @click="tzcx(item)" class="kbai-class" v-for="(item,index) in  lishiS">
						<text>{{item}}</text>
					</text>
					<view class="dbu-yuliukj">
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopName: "",
				shops: [],
				lishiS: ["商品"]
			}
		},
		methods: {
			test() {
				console.log("测试调用")
			},
			xzShop(shopName) {
				console.log("sss")
				this.tzcx(shopName)
			},
			tzcx(shopName) {
				uni.navigateTo({
					url: "../shop-show/shop-show?spName=" + shopName
				})
			},
			/**
			 * 搜索事件
			 */
			sercher() {
				//传递搜索商品名
				if (this.shopName != "") {
					this.tzcx(this.shopName)
					this.saveShopName()
				} else {
					uni.showToast({
						title: '请输入搜索的商品名称',
						icon: "none"
					});
				}

			},
			//保存我们的搜索记录
			saveShopName() {
				var data = this.lishiS;
				if (this.shopName != "") {
					data.push(this.shopName)
					localStorage.setItem("shopName", data)
					this.shopName = ""
				}

			},

			//获取我们本地缓存的搜索记录
			getShopNames() {
				this.shopName = ""
				var data = localStorage.getItem("shopName").split(",")
				this.lishiS = data
			},
			//清理缓存
			clear() {
				localStorage.setItem("shopName", "商品")
				this.getShopNames()

			}
		},

		created() {
			this.getShopNames()
		}
	}
</script>

<style scoped>
	.delete-all {
		position: absolute;
		right: 10%;
		font-weight: 500;
		width: 15%;
		text-align: center;
		border-bottom: 1px solid #e1e1e1;
		bottom: 1%;
	}

	.left-li-shi {
		position: relative;
		width: 100%;
		background-color: #FFFFFF;
	}

	.kbai-class {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		position: relative;
		width: 20%;
		height: 20px;
		text-align: center;
		display: inline-block;
		font-size: 14px;
		margin-top: 20rpx;
		margin-left: 20rpx;
		border-radius: 20px;
		background-color: #f0f2f5;
	}

	.li-shi-name {
		position: relative;
		font-weight: 600;
	}

	.dbu-yuliukj {
		position: relative;
		width: 100%;
		right: 5%;
		background-color: #ffffff;
		height: 50rpx;
	}

	.li-shi {
		position: relative;
		top: 20px;
		height: auto;
		left: 5%;
		width: 100%;
	}

	.rm-ss-craid {
		position: relative;
		width: 10%;
		text-align: center;
		top: 10rpx;
		border-radius: 20px;
		background-color: #f0f2f5;
	}

	.rm-ss {
		position: relative;
		font-weight: 600;
	}

	.rm {
		position: relative;
		width: 100%;
		top: 10rpx;
		left: 5%;
	}

	.searcher-history {
		position: relative;
		height: auto;
		width: 100%;
		background-color: #FFFFFF;
	}
</style>
